<template>
  <div class="c-pb120 c-bg-sgray">
    <div class="c-pf c-ph24 c-pt20 c-pb20 c-w100 c-bg-sgray">
      <div class="c-bg-white c-flex-row c-flex-center c-hh80 c-br40 c-text-hidden c-ph20 search-box">
        <div class="c-fs24">
          <span v-show="searchType == 1" @click="searchType = 2">
            英
            <em class="iconfont c-fstyle-n c-fc-xblue c-fs16 c-pt4 c-ph10">&#xe87b;</em>汉
          </span>
          <span v-show="searchType == 2" @click="searchType = 1">
            汉
            <em class="iconfont c-fstyle-n c-fc-xblue c-fs16 c-pt4 c-ph10">&#xe87b;</em>英
          </span>
        </div>
        <div class="c-pl20 fc-e6 c-fs24">|</div>
        <word-input-bar @startSearch="startSearch" :placeholderText="`请输入${searchType == 1 ? '英文':'中文'}`" :searchValue="searchValue" @emptyInput="emptyInput" @cancelSearch="cancelSearch"></word-input-bar>
      </div>
    </div>
    <div :class="[isCopy == -1 ? 'closeBig copyNot' : '',hasShowMore && !showAllContent ? 'c-text-hidden':'']" class="c-pt100 c-bg-sgray c-fs32">
      <div class="c-pl24 c-pr40 c-text-hidden" v-for="(item,index) in dataInfo" :key="index">
        <div class="c-pt20 c-pb20 c-flex-row c-aligni-center">
          <div class="c-w0 c-flex-grow1 c-flex-row c-aligni-center">
            <div class="groupName c-bg-xblue c-inlineblack"></div>
            <p class="c-fs32 c-fc-xblue c-inlineblack c-pl4 c-w80 c-text-ellipsis1 c-pl10">{{item.groupName}}</p>
          </div>
          <span class="c-fc-xblue c-fs22" v-show="isSearch" @click="clickGoMore(item.dgId)">查看全部</span>
          <i v-show="isSearch" class="iconfont c-fc-xblue c-fs12">&#xe60e;</i>
        </div>
        <div v-if="item.imageUrl && item.imageUrl != '' && item.imageUrl != null" class="c-w100 c-pb20 c-pt10">
          <img :src="$addXossFilter(item.imageUrl)" alt>
        </div>
        <div v-for="(item,index) in item.words " :key="index">
          <p class="c-fw-b c-lh-20">
            <span>{{item.word}}</span>
            <span class="c-pl32">{{item.pronunciation}}</span>
            <span class="c-pl32">{{item.paraphrase}}</span>
          </p>
          <p v-if="item.desc" class="c-lh-20" v-html="item.desc"></p>
        </div>
      </div>
      <div class="no-data">
        <loading-status-tem :noData="dataInfo.length == 0" :noDataText="'暂无相关记录'"></loading-status-tem>
      </div>
    </div>

    <pagination :page="page" :totalPage="totalPage" @changepage="changepage" v-show="showPagination && totalPage > 1"></pagination>
    <my-loading :showLoading="isLoading"></my-loading>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common";
import pagination from "@/components/templates/common/pagination.vue";
import wordInputBar from "@/components/templates/wordInputBar.vue";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import myLoading from "@/plugin/loading/loading.vue";
export default {
  name: "wordQuery",
  components: {
    pagination,
    wordInputBar,
    loadingStatusTem,
    myLoading
  },
  data() {
    return {
      limit: 10,
      searchType: 1,
      search: "",
      page: 1,
      dgId: "",
      dId: "",
      // type: 1,
      isLoading: false,
      dataInfo: "",
      pageInput: 1,
      allPage: "",
      totalPage: 1,
      isCopy: "",
      hasShowMore: false,
      showAllContent: false,
      showPagination: false,
      isSearch: false,
      contentHeight: ""
    };
  },
  methods: {
    getWordQuery() {
      if (!this.isLoading) {
        this.isLoading = true;
        let $this = this;
        utilJs.getMethod(
          global.apiurl +
          "dictionary/getWords/" +
          this.dId +
          "?dgId=" +
          this.dgId +
          "&search=" +
          this.search +
          "&searchType=" +
          this.searchType +
          "&page=" +
          this.page +
          "&limit=" +
          this.limit,
          res => {
            window.scrollTo(0, 0);
            $this.dataInfo = res.data.data;
            $this.totalPage = res.data.totalPage;
            $this.isLoading = false;
            $this.isCopy = res.dictionary.isCopy;
            this.$nextTick(() => {
              this.showPagination = this.checkScrollBottom();
            });
          }
        );
      }
    },
    clickGoMore(dgId) {
      let dId = this.$route.query.extId;
      this.dgId = dgId;
      this.$routerGo(this, "push", {
        path: "/homePage/word/wordMore",
        query: {
          dgId: dgId,
          dId: dId,
          search: this.search
          // searchkey: this.extId
        }
      });
    },
    startSearch(val) {
      this.search = val;
      this.isSearch = true;
      this.page = 1;
      sessionStorage.setItem("search", val);
      this.getWordQuery();
    },
    emptyInput() {
      this.search = "";
      this.isSearch = false;
      this.getWordQuery();
    },
    changepage(page) {
      this.page = page;
      this.getWordQuery();
    },
    cancelSearch() {
      this.search = "";
      this.getWordQuery();
    },
    goback() {
      this.$router.go(-1);
    },
    windowScrollFunction() {
      this.showPagination = this.checkScrollBottom();
    },
    checkScrollBottom() {
      let scrollTop = document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
      let clientHeight = document.body.clientHeight && document.documentElement.clientHeight ? Math.min(document.body.clientHeight, document.documentElement.clientHeight) : Math.max(document.body.clientHeight, document.documentElement.clientHeight);
      let scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
      if (scrollTop + clientHeight >= (scrollHeight - 20)) {
        return true;
      } else {
        return false;
      }
    },
    //分享
    wechatShare() {
      let shareData = JSON.parse(localStorage.getItem("wordShareInfo"));
      utilJs.wechatConfig(
        shareData.shareUrl,
        shareData.title,
        shareData.shareImg,
        shareData.shareDesc,
        function () { },
        true
      );
    },
    //手机端分享
    appShare() {
      let shareData = JSON.parse(localStorage.getItem("wordShareInfo"));
      utilJs.appShareTrue(
        shareData.title,
        shareData.shareImg,
        shareData.shareUrl,
        shareData.shareDesc
      );
    }
  },
  activated() {
    setDocumentTitle("词典详情"); // eslint-disable-line
    this.page = 1;
    this.dgId = "";
    this.search = "";
    this.dId = this.$route.query.extId;
    this.showAllContent = false;
    this.hasShowMore = false;
    this.wechatShare();
    let search = sessionStorage.getItem("search");
    if (!!!search) {
      this.getWordQuery();
    } else {
      this.startSearch(search);
    }
    window.scrollTo(0, 0);
    window.addEventListener("scroll", this.windowScrollFunction);
  },
  created() {
    utilJs.appShare(this);
    window.removeEventListener("scroll", this.windowScrollFunction);
  }
};
</script>

<style scoped>
.search-box {
  box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.03);
}
.fc-e6 {
  color: #e6e6e6;
}
.groupName {
  width: 3px;
  height: 15px;
}
.no-data {
  padding-top: 3rem;
  padding-bottom: 9rem;
}
</style>